<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>CSS스프라이트</title>
	</head>

	<body>
		<h1>CSS스프라이트(sprite)</h1>
		<p>스프라이트 이미지는 사이트에 사용하는 모든 이미지를 하나의 이미지 파일에 만들어 두고 position을 이용해 특정 부위의
			이미지만 보여주는 기법</p>
		<p>웹에서 각각의 이미지를 불러오려면 http 요청이 각각 발생되고 내려받는데<br />
			시간이 소요되므로 전체 사이트 로딩시간이 지연됨<br />
			또한, http 요청 발생으로 인해 웹 서버 자원 사용 비용이 증가함</p>
		<p>CSS 스프라이트 기법을 사용하면 이러한 단점을 해결할 수 있음</p>
		<div style="width: 134px; height: 44px;
		background-image: url('images/sprites.gif');"> </div>
		<div style="width: 46px; height: 44px;
		background-image: url('images/sprites.gif');"> </div>
		<div style="width: 43px; height: 44px;
		background-image: url('images/sprites.gif');
		background-position: -47px 0;"> </div>
		<div style="width: 43px; height: 44px;
		background-image: url('images/sprites.gif');
		background-position: -91px 0;"> </div>
		<hr />
		<div style="width: 33px; height: 40px;
		background-image: url('images/iconsprite.png');
		background-position: -100px -50px"> </div>
		<div style="width: 33px; height: 40px;
		background-image: url('images/iconsprite.png');
		background-position: -100px -200px"> </div>
		<div style="width: 33px; height: 40px;
		background-image: url('images/iconsprite.png');
		background-position: -55px -250px"> </div>
		<hr />
		<h2>배경이미지 관련 속성 단축형으로 쓰기</h2>
		<p>background : 색상, 이미지, 반복여부, 고정여부</p>
		<div style="background: url('images/suji02.jpg'); no-repeat 50% 50%;
		width: 750px; height: 450px; border: 1px solid navy;"> </div>
			
		</style>
	</body>
</html>